iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
2
Modern Web

連續30天的超實務網頁設計的垂直置中教學系列 第 19

使用 Display: table-cell 做網頁垂直置中

  • 分享至 

  • xImage
  •  

簡言

這一招我想有點年紀的開者應該都有看過了,當然像我這麼嫩的開發者當然是第一次看到啦(這是什麼幹話),這一招的原理在於使用 CSS display 屬性將div設定成表格的儲存格(td),這樣就能利用支援儲存格垂直對齊的 vertical-align: middle 屬性來將資料垂直置中啦。

原理說明

CSS 的 vertical-align 屬性一直都是很多設計師或工程師心中的痛,因為預設的 block 類型物件是不支援這屬性的,也因為如此所以很多人在製作網頁的垂直置中需求時都會有一種 WTF 的內心戲,明明字面上就是設定直向的位置,為什麼林北設定了沒用阿阿阿阿阿阿!!!!!(對不起我剛剛失控了),那麼支援 vertical-align 屬性的物件類型有那些呢? 基本上有兩種,一種是儲存格(table-cell)物件,一種則是具備 inline 特性的物件,像是 inline 或是 inline-block 都是具備 inline 特性的屬性值,在這個例子中我們就是利用將物件設定成儲存格(table-cell)屬性,然後就能讓 div 標籤支援 vertical-align 屬性啦,原理就這麼簡單啦,下次我們看到網頁內的物件時,可以好好想想物件是什麼屬性喔,不要光是看表象了^^。

<div class="box">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位


上一篇
使用 Grid + margin 來達到垂直置中目的
下一篇
使用計算機 calc 來做到垂直置中效果
系列文
連續30天的超實務網頁設計的垂直置中教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言